<!--
 * @Author: xlm
 * @Date: 2021-07-05 16:34:20
 * @LastEditors: xlm
 * @LastEditTime: 2021-07-26 11:24:51
 * @Description: 
-->
<template>
   <view class="phone-verify-box" @touchmove="preventTouchMove">
      <view class="phone-verify">
        <view class="top">
          <view class="top-left">
            <view class="tit">请填写短信验证码：</view>
            <view class="desc">将发送到手机号：{{phone}}</view>
          </view>
          <image src="/static/images/icon/icon_close.png" class="close" @click="close" />
        </view>
        <view class="code-box">
          <view class="messageCodeShow">
            <view class="input-fixed">
              <view class="input-hide">
                <input ref="inputCode" v-model="messageCode" type="number" maxlength="6" 
                 placeholder-class="input-holder"
                  @focus="focusInput($event)"
                  @keyboardheightchange="keyboardheightchange($event)"
                  @blur="blurInput"
                  :focus="inputFocus"
                  cursor-spacing="100" />
              </view>
              <!-- <view class="verifyBox" @click="verify">{{ getVerify }}</view> -->
            </view>
            <view class="code-box height-fix">
              <view v-for="(item, key) in messageCode" :key="key" class="code-item">
                {{ item }}
              </view>
            </view>
            <view class="code-box">
              <view v-for="(k, index) in 6" :key="index" class="code-box-line" :class="{'activity': index === messageCode.length}"></view>
            </view>
          </view>
        </view>
        <view class="bottom-tip">
          <view v-if="getVerify === '重新获取验证码'" class="decorate blue" @click="verify">重新获取验证码</view>
          <view v-else class="decorate"> {{ `${getVerify}` }}   </view>
        </view>
      </view>
    </view>
</template>

<script>

export default {
  props: {
    phone: {
      type: String,
      default: ""
    },
    downTime: {
      type: Number,
      default: 60
    },
  },
  components: {},
  data () {
    return {
      messageCode: "",
      getVerify: '',
      bottomClass: '', // 键盘问题
      timer: null,  // 定时器
      dealyTime: this.downTime,
      inputFocus: true
    }
  },
  computed: {},
  watch: {
    messageCode(newVal){
      console.log("输入:", newVal)
      if(newVal && newVal.length===6){
        this.$emit("validMsg", newVal)
      }
    }
  },
  created () {

  },
  mounted () {
    setTimeout(() => {
      this.sendMsg()
      this.inputFocus = true
    }, 100);
  },
  beforeDestroy () {
    if(this.timer){
      clearInterval(this.timer)
    }
  },
  activated () { },
  methods: {
    sendMsg() {
      this.getVerify = this.dealyTime + 's后重试'
      this.timer = setInterval(() => {
        this.dealyTime--
        this.getVerify = this.dealyTime + 's后重新获取'
        if (this.dealyTime <= 0) {
          clearInterval(this.timer)
          this.getVerify = '重新获取验证码'
        }
      }, 1000)
    },
    // 点击重新获取验证码
    verify(){
      this.$emit("sendMsg", true)
      this.dealyTime = this.downTime
      this.sendMsg()
    },
    close(){
      this.$emit('close')
    },
    focusInput(e){
      // this.$nextTick(()=>{
      //   let view = uni.createSelectorQuery().select('.bottom-tip')
      //   view.boundingClientRect(function (rect) {
      //     console.log('底元素:', rect)
      //   }).exec()
      // })
    },
    keyboardheightchange(e){
      // console.log("键盘高度:", e.detail.height)
    },
    blurInput(){
      this.bottomClass = ''
    },
    preventTouchMove(){}
  }
}
</script>

<style lang='scss' scoped>
// 

.phone-verify-box{
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100%;
  max-height: 100vh;
  overflow: hidden;
  background: rgba(0,0,0,0.4);
  z-index: 100;
  .phone-verify{
    position: absolute;
    bottom: 0;
    left: 0;
    background: white;
    width: 100vw;
    z-index: 100;
    // 验证码放在顶部
    height: 100%;
    // overflow: hidden;
    .top{
      padding-left: 56rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .top-left{
        .tit{
          font-size: 46rpx;
          line-height: 56rpx;
          padding-top: 55rpx;
          font-weight: bold;
        }
        .desc{
          color: #999999;
          font-size: 28rpx;
          line-height: 38rpx;
          margin-top: 10rpx;
        }
      }
    }
    .close{
      width: 34rpx;
      height: 34rpx;
      display: block;
      padding: 16rpx;
      margin-right: 19rpx;
      margin-top: 52rpx;
      align-self: start;
    }
  }
}
// 验证码部分
.messageCodeShow{
  position: relative;
  padding-left: 56rpx;
  margin-top: 80rpx;
  .input-fixed{
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: absolute;
    opacity: 0;
    .input-hide{
      width: 100%;
      height: 100%;
    }
    input{
      width: 200%;
      height: 100%;
      opacity: 0;
      color:transparent;
      text-indent: -999rpx;
      margin-left: -100%;
      text-shadow:0 0 0 red;
    }

  }
  .code-box{
    display: flex;
  }
  .height-fix{
    height: 80rpx;
  }
  .code-item{
    width: 72rpx;
    margin-right: 40rpx;
    padding: 10rpx 0;
    text-align: center;
    line-height: 58rpx;
    font-size: 48rpx;
    &:nth-last-child(1) {
      margin-right: 0;
    }
  }
  .code-box-line{
    width: 72rpx;
    margin-right: 40rpx;
    border-bottom: 2rpx solid #9a9a9a;
    &:nth-last-child(1) {
      margin-right: 0;
    }
    &.activity{
      border-bottom: 4rpx solid #000;
      animation: sharking 2s linear infinite;
    }
    @keyframes sharking {
      0% {
        opacity: 0;
      }
      50% {
        opacity: 1;
      }
      100% {
        opacity: 0;
      }
    }
  }
}
.decorate{
  padding: 40rpx 56rpx;
  font-size: 28rpx;
  line-height: 38rpx;
  color: #999;
}
.decorate.blue{
  color: #007FFF;
}
.bottomClass{
  bottom: 116rpx !important;
}
</style>
